<template>
    <view class="container">
        <!-- 用户信息区域 -->
        <view class="profile-section" @click="loginWithWeChat" v-if="!userId">
            <!-- 如果未登录，显示点击头像登录 -->
            <view class="profile-avatar iconfont icon-touxiang" v-if="!userInfo.avatar"></view>
            <image v-else :src="userInfo.avatar" class="profile-avatar-image"></image>
            <text class="profile-text" v-if="!userInfo.nickName">点击头像登录</text>
            <text class="profile-text" v-else>{{ userInfo.nickName }}</text>
        </view>

        <!-- 显示用户信息 -->
        <view class="profile-section" v-else v-bind:class="{ 'profile-section-golden': user.stationVip!= 0 }">
            <view class="profile-avatar-container">
                <!-- 头像 -->
                <image :src="user.avatar" class="profile-avatar-image" />
                <!-- 如果是会员，显示金色的VIP文字 -->
                <text v-if="user.stationVip!= 0" class="vip-text">VIP</text>
            </view>
            <text class="profile-text">{{ user.nickname }}</text>
            <text class="profile-text">用户ID: {{ userId }}</text>
            <!-- <text class="profile-text">VIP到期时间: {{ formatDate(user.vipExpireTime) }}</text> -->
            <!-- <text class="profile-text">积分: {{ user.score }}</text> -->
        </view>

        <!-- 统计数据区域 -->
        <view class="stats-section" v-if="userId">
            <view class="stat-item">
                <text class="stat-number">{{user.distUserInfo.totalAmount}}</text>
                <text class="stat-label">个人收益</text>
            </view>
            <view class="stat-item" @click="goToWithdraw">
                <text class="stat-number">{{user.distUserInfo.avaibleAmount}}</text>
                <text class="stat-label">可提现金额</text>
            </view>
            <view class="stat-item" @click="TeamMembers">
                <text class="stat-number">{{user.distUserInfo.subCount}}</text>
                <text class="stat-label">团队成员</text>
            </view>
        </view>

        <!-- 功能菜单区域 -->
        <view class="menu-section">
            <view class="menu-item" v-for="(item, index) in menuItems" :key="index"
                @click="navigateTo(item.path,index)">
                <view class="iconfont" :class="item.icon" :style="{ color: item.color }"></view>
                <text class="menu-text">{{ item.text }}</text>
                <view class="iconfont icon-arrow-right menu-arrow"></view>
            </view>
        </view>
        <!-- 退出登录按钮 -->
        <view class="logout-button" @click="logout" v-if="userId">
            <text class="logout-text">退出登录</text>
        </view>
        <!-- 底部版权信息 -->
        <view class="footer-section">
            <text class="footer-text">版权所有 © 柳江科技</text>
            <!-- <text class="footer-text">服务热线：400-0035-125</text> -->
            <text class="footer-text">更多功能请直接登录志愿汇App体验</text>
            <text class="footer-text">ver:1.01</text>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                userId: null, // 用户ID
                userInfo: {}, // 存储用户信息
                user: {}, // 存储系统返回的用户数据
                menuItems: [
                    { icon: 'icon-aixin',text: '已报名的活动',color: '#f44336',path: '/pages/registeredActivities' },
                    { icon: 'icon-a-hongqiqizhibiaoji',text: '已加入的组织',color: '#4CAF50',path: '/pages/joinedOrganizations' },
                    { icon: 'icon-geren',text: '个人资料',color: '#2196F3',path: '/pages/personalData/personalData' },
                    { icon: 'icon-guanyuwomen',text: '关于我们',color: '#FF9800',path: '/pages/personalData/personalData' },
                ]
            };
        },
        onShow() {
            if (this.f.isnull(this.f.storage('user_data')) != '') {
                // 如果用户已登录，获取用户ID并加载用户信息
                this.userId = this.f.storage('user_data').userId;
                this.loadUser(this.userId);
            }
        },
        methods: {
            TeamMembers() {
                this.f.nav('/pages/TeamMembers/TeamMembers')
            },
            // 跳转到提现页面
            goToWithdraw() {
                if (!this.userId) {
                    this.f.msg('请先登录');
                    return;
                }
                this.f.nav('/pages/withdraw/withdrawList');
            },
            loadUser(userId) {
                var t = this;
                t.$api.req('/station/member/get',{
                },'get','JSON',false).then(res => {
                    t.user = res.data;
                    t.user = res.data;
                    // 提取具体要展示的数据赋值给对应的变量
                    t.userId = res.data.userId;
                    t.userInfo.nickName = res.data.nickname;
                    t.userInfo.avatar = res.data.avatar;
                    // t.user.myInfo.birth = t.f._age(t.user.myInfo.birth);
                    // t.user.othInfo.birth = t.f._age(t.user.othInfo.birth);
                    console.log(t.user);
                });
            },
            // 登录方法
            loginWithWeChat() {
                this.f.nav('/pages/login/login1');
            },
            // 退出登录
            logout() {
                uni.showModal({
                    title: '退出登录',
                    content: '您确定要退出登录吗？',
                    showCancel: true,  // 显示取消按钮
                    cancelText: '取消', // 取消按钮文本
                    confirmText: '确认', // 确认按钮文本
                    success: (res) => {
                        if (res.confirm) {
                            // 如果用户点击确认按钮
                            uni.clearStorageSync();  // 清除本地存储
                            this.userInfo = {}; // 清空当前页面的用户信息
                            this.userId = null; // 清空用户ID

                            // 重定向到登录页
                            this.f.nav('/pages/login/login1');
                        } else if (res.cancel) {
                            // 如果用户点击取消按钮
                            console.log('用户取消了退出登录');
                        }
                    }
                });
            },
            // 页面跳转
            navigateTo(path,i) {
                if (i == 0) {
                    // 已报名的活动
                    uni.navigateTo({
                        url: '/pages/registeredActivities/registeredActivities'
                    });
                } else if (i == 1) {
                    // 已加入的组织
                    uni.navigateTo({
                        url: '/pages/joinedOrganizations/joinedOrganizations'
                    });
                } else if (i == 2) {
                    // 个人资料
                    uni.navigateTo({
                        url: path
                    });
                } else {
                    this.f.msg('此功能正在开发中，敬请期待！');
                }
            },
            
            // 格式化时间（例如：VIP到期时间）
            formatDate(timestamp) {
                const date = new Date(timestamp);
                return date.toLocaleDateString(); // 返回当地日期格式
            }
        }
    }
</script>



<style>
    .profile-avatar-container {
        position: relative;
    }

    /* 会员图标 (金色文字VIP) */
    .vip-text {
        position: absolute;
        top: 5rpx;
        right: -15rpx;
        font-size: 24rpx;
        color: gold;
        /* 金色文字 */
        font-weight: bold;
        background-color: rgba(0, 0, 0, 0.3);
        padding: 5rpx 10rpx;
        border-radius: 10rpx;
    }

    .profile-text {
        font-size: 34rpx;
        color: #333;
        margin-top: 15rpx;
    }

    .container {
        /* background-color: #f6f8fa; */
        padding: 20rpx;
        font-family: Arial, sans-serif;
    }

    /* 用户信息区域 */
    .profile-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 60rpx 0;
        background-color: #ffffff;
        margin-bottom: 20rpx;
        border-radius: 16rpx;
        box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.08);
    }

    .profile-avatar {
        font-size: 120rpx;
        color: #d9d9d9;
    }

    .profile-avatar-image {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
    }

    .profile-text {
        font-size: 34rpx;
        color: #333;
        margin-top: 15rpx;
    }

    /* 统计数据区域 */
    .stats-section {
        display: flex;
        height: 120rpx;
        align-items: center;
        justify-content: space-around;
        /* padding: 30rpx 0; */
        background-color: #ffffff;
        border-radius: 16rpx;
        box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.08);
        margin-bottom: 20rpx;
    }

    .stat-item {
        width: 33%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .stat-number {
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
    }

    .stat-label {
        font-size: 26rpx;
        color: #888;
        margin-top: 8rpx;
    }

    /* 功能菜单区域 */
    .menu-section {
        margin-top: 20rpx;
    }

.menu-item {
    display: flex;
    align-items: center;
    padding: 25rpx 30rpx;
    background-color: #ffffff;
    border-radius: 12rpx;
    margin-bottom: 15rpx;
    box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

    .menu-icon {
        font-size: 40rpx;
    }

.menu-text {
    flex: 1;
    font-size: 30rpx;
    color: #333;
    margin-left: 20rpx;
}

.menu-arrow {
    font-size: 34rpx;
    color: #ccc;
}

    /* 退出登录按钮 */
    .logout-button {
        margin-top: 30rpx;
        background-color: #f44336;
        padding: 20rpx 0;
        border-radius: 12rpx;
        text-align: center;
        box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.08);
    }

    .logout-text {
        font-size: 32rpx;
        color: #ffffff;
        font-weight: bold;
    }

    /* 底部版权信息 */
    .footer-section {
        text-align: center;
        padding: 40rpx 0;
        color: #999;
        font-size: 22rpx;
    }

    .footer-text {
        font-size: 22rpx;
        color: #999;
        display: block;
        /* 独占一行 */
        margin-top: 10rpx;
        /* 增加垂直间距 */
    }

    .profile-section-golden {
        background: linear-gradient(to right, #FFD700, #FFA500);
        border-radius: 16rpx;
        box-shadow: 0 0 10rpx 5rpx rgba(255, 215, 0, 0.8), 0 10rpx 20rpx rgba(0, 0, 0, 0.08);
        /* 新增一层金色的发光阴影效果 */
        padding: 60rpx 0;
        margin-bottom: 20rpx;
    }
</style>